<template>
  <section style="padding-bottom: 30px;">
    <div class="header">
      <span style="font-weight: bold;">{{rcarnum}}</span>
      <span>查询结果（{{rlength}}条）</span>
    </div>
    <div style="padding-bottom: .8rem;"></div>
    <div v-if="rlength == 0">
      <img src="../../assets/sech/no_tip.png" style="width: 4rem;margin-top: .86rem;">
      <p style="margin-top: .3rem;color: #666;">{{result}}</p>
    </div>
    <yd-infinitescroll :callback="loadList" ref="infinitescrollDemo">
    <div class="big_pt" v-for="(item,index) in arrList" :key="index" slot="list" v-if="index<PAGECOUNT">
      <div class="tit">
        <p class="num_d">{{index+1}}</p>
        <span class="weight">违章记录</span>
      </div>
      <ul>
        <li>
          <span>违章时间</span>
          <span>{{item.date}}</span>
        </li>
        <li>
          <span>查询城市</span>
          <span>{{item.city}}</span>
        </li>
        <li>
          <span>违章地点</span>
          <span>{{item.address}}</span>
        </li>
        <li>
          <span>违章行为</span>
          <span>{{item.action}}</span>
        </li>
        <li>
          <span>违章扣分</span>
          <span>{{item.score}}</span>
        </li>
        <li>
          <span>违章罚款</span>
          <span style="color: red;">{{item.money}}</span>
        </li>
        <li>
          <span>是否处理</span>
          <span v-if="item.handled == 1" style="color: #31AEEF;">已处理</span>
          <span v-if="item.handled == 0" style="color: red;">未处理</span>
          <span v-if="item.handled == ''" style="color: red;">未知</span>
        </li>
        <li>
          <span>违章采集机关</span>
          <span>{{item.department}}</span>
        </li>
      </ul>
    </div>
      <span slot="doneTip">没有更多信息了</span>
    </yd-infinitescroll>
  </section>
</template>

<script>
  export default {
    name: "carLawResult",
    data() {
      return {
        rcarnum: '',
        rlength: '',
        PAGECOUNT:10,
        arrList:[],
        result:'',
      }
    },
    methods:{
      loadList() {
        const that = this;
        if (this.PAGECOUNT >= this.rlength - 1) {
            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
          return;
        }
        setTimeout(()=>{
          this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
          this.PAGECOUNT = this.PAGECOUNT+10;
        },500)
      },
    },
    created() {
      let obj = JSON.parse(sessionStorage.getItem('TO_OBJECT'));
      this.rcarnum = obj.carnum;
      if (obj.code == 200) {
        if (obj.resultCode == 1001) {
          this.arrIndex = 10;
          this.rlength = obj.arrlen;
          if (this.rlength > 10) {
            this.btnIS = true;
          }
          this.arrList = obj.resultInfo;
        } else {
          this.rlength = 0;
          this.result = '没有相关数据哦~';
        }
      } else {
        this.rlength = 0;
        this.result = obj.message;
      }
    }
  }
</script>

<style scoped>
  .header {
    width: 100%;
    height: .8rem;
    display: flex;
    align-items: center;
    box-shadow: 2px 2px 10px rgba(128, 128, 128, .3);
    padding-left: .3rem;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 999;
  }

  .header span:nth-child(2) {
    margin-left: .2rem;
  }

  .tit {
    display: flex;
    align-items: center;
    height: 1rem;
  }

  .big_pt {
    padding: 0rem .3rem 0rem .3rem;
    box-shadow: 2px 2px 10px rgba(128, 128, 128, .2);
    margin: .4rem .2rem 0 .2rem;
    border-top: 2px solid red;
    border-radius: 2px;
  }

  .big_pt ul {
    padding-top: .3rem;
    border-top: 1px solid #f2f2f2;
  }

  .big_pt li {
    display: flex;
    text-align: left;
    padding-bottom: .3rem;
    align-items: center;
  }

  .big_pt li span:nth-child(1) {
    width: 2.4rem;
    flex: none;
    color:#929292;
  }
  .weight {
    font-weight: bold;
  }
  .num_d{
    height: .4rem;
    background: #B5B5B5;
    color: #fff;
    border-radius: 3px;
    font-size: .24rem;
    line-height: .4rem;
    margin-right: 10px;
    padding: 0 .25rem;
  }
</style>
